<template>
	<view>
		<view class="">
			<!--  -->
			<navBar :title="title"></navBar>
			<!-- 1 -->
			<view class="bg-white  flex justify-around align-items-center">
				<view class="flex  py-20 align-items-center">
					<u-avatar size="60" class="" :src="imgName" @click="avatarUpload"></u-avatar>
					<!-- 2 -->
					<h2 class="pl-10" @click="$pub.go(`/pages/changeInfo/changeInfo`)">
						{{ userInfo.nickName ||  userInfo.userName || '默认姓名'}}
					</h2>
				</view>
				<!-- 3 -->
				<view class="btn flex align-items-center border ">
					<uni-icons color="#1678ff" type="refreshempty"></uni-icons>
					<view class="text-blue" style="font-weight: 600;" @click="$pub.go('/pages/login/login')">
						切换用户
					</view>
				</view>
				<!-- 4 -->
			</view>
			<u-gap></u-gap>
			<u-cell-group>
				<u-cell icon="setting-fill" link isLink url="/pages/resetPassword/resetPassword" title="重置密码"></u-cell>
				<u-cell icon="close-circle-fill" link isLink @click="clearHandle" title="退出登录"></u-cell>
			</u-cell-group>

		</view>
	</view>
</template>

<script>
	import {
		mapState, //先导入mapState方法
		mapMutations,
		mapActions,
	} from "vuex";
	import base from '@/utils/env.js'
	import {
		login,
		getInfo,
		InfoChange,
		avatarUpload,
		updatePwd
	} from '@/api/login/login.js'
	export default {
		data() {
			return {
				title: "我的",
				imgage: '',
				base: ''
			};
		},
		methods: {
			...mapActions('user', ['getInfo']),
			async avatarUpload() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths
						// console.log(tempFilePaths, "tempFilePaths");
						console.log(tempFilePaths[0], 6666);
						uni.uploadFile({
							url: base.baseUrl + '/api/avatar', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'avatarfile',
							header: {
								Authorization: uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes, "uploadFileRes");
								// console.log(JSON.parse(uploadFileRes.data).url, 20)
								// console.log(JSON.parse(uploadFileRes.data).imgUrl, 30)
								let url = JSON.parse(uploadFileRes.data).imgUrl
								this.imgage = url
							},
						})
					},
				})
			},
			/*  */
			clearHandle(){
				console.log(1,"clear")
				uni.clearStorageSync();
				/*  */
				uni.reLaunch({
				url: '/pages/my/my'  //这是你的当前页面地址
			 });
			},
		},
		
		computed: {
			...mapState('user', ['userInfo']),
			imgName() {
				return base.baseUrl + this.userInfo.avatar
			}
		},
		onReady() {
			this.base = base
			this.getInfo()
			// //新的标题
			// uni.setNavigationBarTitle({
			// 	title: '我的'
			// });
			// //标题蓝颜色
			// uni.setNavigationBarColor({
			// 	frontColor: '#000000',
			// 	backgroundColor: '#8ebbfd'
			// });
		},
	}
</script>

<style lang="scss" scoped>
	.border {
		border: 3rpx solid #1678ff;
		border-radius: 5rpx;
	}
</style>

<style>
	page {
		/* background-color: #f3f3f3; */
	}
</style>